<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Dashboard</title>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js "></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>

<!-- 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.1.1/css/searchPanes.dataTables.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap.min.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
    <script>

        $(document).ready(function () {

            $('#event_history').DataTable({

                initComplete: function () {
                    this.api().columns([0, 1]).every(function () {
                        var column = this;
                        var colId = column[0][0]
                        var select = $('</label><select  class="x1" multiple="multiple">')
                            .appendTo($(`#filter${colId}`))
                            .on('change', function () {
                                var vals = $('option:selected', this).map(function (index, element) {
                                    return $.fn.dataTable.util.escapeRegex($(element).val());
                                }).toArray().join('|');

                                column
                                    .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                    $('.x1').multiselect({
                        includeSelectAllOption: true,
                        selectAllName: 'All'
                    });


                },

                "drawCallback": function(settings) {
                    $(function () {
                        $(".btn-danger, .btn-warning").tooltip({ show: null });
                    });
                }, 
                ajax: {  //api_key=f588e568b79826bd0e5577beef321dd5
                    "url": "api/app/get_history?limit=1000&session_id=" + localStorage.session_id,
                    "dataSrc": "rows"
                },

                order: [[9, "desc"]],

                scrollY: "50vh",

                select: true,

                columnDefs: [
                    {
                        "targets": [0, 1],
                        "visible": false,
                    }],

                columns: [
                    { "title": "event", "data": "event_title" },
                    { "title": "category", "data": "category_title" },
                    { "title": "job id", "data": "id", render: data => `<a href="/#JobDetails?id=${data}" target="_blank">${data}</a>` },
                    { "title": "event", "data": "event_title", render: data => `<i class="fa fa-clock-o"> </i> <span> ${data}</span>` },
                    { "title": "hostname", "data": "hostname", render: data => `<i class="fa fa-server"> </i> <span> ${data}</span>` },
                    { "title": "plugin", "data": "plugin_title", render: data => `<i class="fa fa-plug"> </i> <span> ${data}</span>` },
                    //{ "title": "action", "data": "action" },
                    { "title": "category", "data": "category_title", render: data => `<i class="fa fa-folder-open-o"> </i> <span> ${data}</span>` },
                    {
                        "data": "code", "title": "status", "render": function (data, type, row) {
                            let errorTitle = row.description ? row.description.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, "") : " " 
                            if (row.action == "job_complete_debug") { return `<span class="btn-sm btn-info"><b>Debug</b></span>` }
                            if (row.code == 255) { return `<span class="btn-sm btn-warning" title="${errorTitle}"><b>Warning</b></span>` }
                            if (row.code == 130) { return `<span class="btn-sm btn-danger" title="${errorTitle}"><b>Aborted</b></span>` }
                            if (row.code > 0) { return `<span class="tooltip-1 btn-sm btn-danger"  title="${errorTitle}"><b class="tooltip-1">Error</b></span>` }
                            return '<span class="btn-sm btn-success"><b>Success</b></span>'
                        }
                    },
                    { "title": "code", "data": "code" },
                    {
                        "title": "time_start",
                        "data": "time_start",
                        "render": function (data, type, row) {
                            if (type === "sort" || type === "type") { return data }
                            return new Date(data * 1000).toLocaleString()
                        }
                    },
                    {
                        title: "elapsed", data: "elapsed", render: data => {
                            if (data < 120) { return (Math.ceil(data) + ' sec') }
                            return (Math.round(data / 60) + ' min')


                        }
                    },

                ],  // columns


            });
        });


    </script>

    <div class="container">
        <div class="row">
            <h1>Event Dashboard</h1>
            <div style="float:right; padding-right: 25px"><a href="/#History">
                <i class="fa fa-arrow-circle-left"></i>
                <b> Go Back </b></a>
            </div>
        </div>
        <div class="row" >
            <div id="filter0" class="col-sm-3"><span>Filter Event </span></div>
            <div id="filter1" class="col-sm-3"><span>Filter Category </span></div>
        </div>
        <div class="row"><label> </label></div>
        <div class="row">
            <div class="col-sm-12">
                <table id="event_history" class="table table-striped table-bordered" width="100%">

                </table>
            </div>
        </div>

    </div>



</body>

</html>